<template>
  <div>
    <div style="width: 800px; height: 400px" id="main"></div>
  </div>
</template>
<script>
import * as echarts from "echarts";

export default {
  name: "Charts",
  data() {
    return {
      allList: [],
    };
  },
  methods: {

    // 发送请求，从后台获取数据
    sendRequest() {
      this.$http("/hot-info/realFirst?count=10&currentDate=" + this.$store.state.currentDate).then((response) => {
        if (response.data.code !== 0) {
          this.$message.error(response.data.msg);
          return;
        }
        this.allList = response.data.data;
        this.loadChart(this.allList);
      });
    },

    loadChart(dataList) {
      let x = [];
      let y = [];

      for (let i = 0; i < dataList.length; i++) {
        // 设置X轴的坐标
        x.push(dataList[i].firstword);
        // 设置Y轴的值
        y.push(dataList[i].addedAnswerCount);

      }
      // 设置柱状图的option
      let option = {
        title: {
          text: "今日话题回答增长量",
        },
        tooltip: {},
        xAxis: {
          data: x,
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 45
          }
        },
        yAxis: {
          name: "次",
          tooltip: {
            show: true
          }
        },
        series: [
          {
            name: "热点词",
            type: "bar",
            data: y,
          },
        ],
      };
      let myChart = echarts.init(document.getElementById("main"));
      myChart.setOption(option);
    }
  },
  mounted() {
    this.sendRequest();
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
